<!-- @format -->
<script setup>
	// 树形数组数据
	const treeData = [
		{
			id: 1,
			label: 'Level one 1',
			children: [
				{
					id: 4,
					label: 'Level two 1-1',
					children: [
						{
							id: 9,
							label: 'Level three 1-1-1'
						},
						{
							id: 10,
							label: 'Level three 1-1-2'
						}
					]
				}
			]
		},
		{
			id: 2,
			label: 'Level one 2',
			children: [
				{
					id: 5,
					label: 'Level two 2-1'
				},
				{
					id: 6,
					label: 'Level two 2-2'
				}
			]
		},
		{
			id: 3,
			label: 'Level one 3',
			children: [
				{
					id: 7,
					label: 'Level two 3-1'
				},
				{
					id: 8,
					label: 'Level two 3-2'
				}
			]
		}
	]
</script>

<template>
	<el-tree
		:data="treeData"
		show-checkbox
		default-expand-all>
		<!-- 
      通过作用域插槽进行自定义节点内容：
        node: 当前节点对象
        data: 当前节点数据
    -->
		<template #default="{ data }">
			<div class="custom-tree-node">
				<span>{{ data.label }}</span>
				<span>
					<!-- 
            size: 按钮大小
            type: 按钮类型
            text: 纯文字按钮
          -->
					<el-button
						size="small"
						type="primary"
						text="plain"
						>添加</el-button
					>

					<el-button
						size="small"
						type="danger"
						text="plain"
						>删除</el-button
					>
				</span>
			</div>
		</template>
	</el-tree>
</template>

<style scoped>
	.custom-tree-node {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 600px;
		height: 45px;
	}
</style>
